<template>
    <div class="detailPage">
      <!-- header -->
      <div class="search_header">
        <van-nav-bar
          title="商品详情页"
          left-arrow
          @click-left="$router.go(-1)"
          fixed
        />
      </div>
      <div class="detail_content">
        <div class="detail_photo">
        <!-- 轮播照片 -->
        <van-swipe :autoplay="3000" indicator-color="black">
          <van-swipe-item  v-for="item in detail.goods_images" :key="item.file_id">
            <img :src="item.external_url" height="100%" width="100%">
          </van-swipe-item>
        </van-swipe>
        </div>
        <div class="detail_text">
          <div class="goods_price">
            <p>
              <span class="new_price">￥{{ detail.goods_price_max }}</span>
              <del class="old_price">￥{{ detail.line_price_max }}</del>
            </p>
            <span>已售{{ detail.goods_sales }}</span>
          </div>
          <p class="goods_name">{{ detail.goods_name }}</p>
        </div>
        <div class="detail_service" @click="showPopup">
          <div>
            <van-icon name="checked" color="red"></van-icon>七天无理由退货
            <van-icon name="checked" color="red"></van-icon>48小时发货
          </div>
          <van-icon class="arrow" name="arrow" />
        </div>
        <!-- 评价区域 -->
        <div class="detail_evaulate">
          <div class="evaluate_title">
            <span>商品评价（{{ total }}条）</span>
            <p>查看更多<van-icon class="arrow" name="arrow" /></p>
          </div>
          <div class="evaluate_item">
            <div class="item" v-for="item in evaluate" :key="item.comment_id">
              <div class="item_header">
                <img :src="item.user.avatar_url || defaultImg" height="20px">
                <span>{{ item.user.nick_name }}</span>
                <van-rate
                  v-model="item.score"
                  :size="25"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee" />
              </div>
              <div style="display: flex; flex-wrap: wrap; word-break: break-all;">{{ item.content}}</div>
              {{item.create_time}}
            </div>
          </div>
          <div>hhhhh</div>
        </div>
        <!-- 底部 -->
        <van-tabbar route active-color="#ee0a24" inactive-color="#000">
          <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
          <van-tabbar-item to="/car" icon="cart-o" :badge="addValue">购物车</van-tabbar-item>
          <button @click="show_Car" style="background-color: #fb0;">加入购物车</button>
          <button @click="show_Buy" style="background-color: red;">立即购买</button>
        </van-tabbar>

        <van-popup v-model="show" closeable position="bottom" :style="{ height: '40%' }">
          <div style="width: 100px; font-size: 18px; margin-left: 150px; padding: 10px;">服务</div>
          <div style="margin: 10px; padding: 10px;">
            <van-icon name="checked" color="red"></van-icon>七天无理由退货
            <p>满足相应条件时，消费者可申请7天无理由退货</p>
            <van-icon name="checked" color="red"></van-icon>48小时发货
            <p>下单后48小时之内发货</p>
          </div>
        </van-popup>

        <van-action-sheet v-model="showCar" closeable>
          <div style="display: flex; padding: 5px;">
            <img :src="detail.goods_images[0].external_url" width="100px">
            <div style="margin-top: 40px;">
              <p style="color: red;">￥{{ detail.goods_price_max }}</p>
              <p>库存：{{ detail.stock_total }}</p>
            </div>
          </div>
          <div style="display: flex; justify-content: space-between; padding: 5px;">
            <span>数量</span>
            <addBut v-model="addValue"></addBut>
          </div>
          <button @click="addCart" class="addCart">加入购物车</button>
        </van-action-sheet>

        <van-action-sheet v-model="showBuy" closeable>
        <div style="display: flex; padding: 5px;">
          <img :src="detail.goods_images[0].external_url" width="100px">
          <div style="margin-top: 40px;">
            <p style="color: red;">￥{{ detail.goods_price_max }}</p>
            <p>库存：{{ detail.stock_total }}</p>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between; padding: 5px;">
          <span>数量</span>
          <addBut v-model="addValue"></addBut>
        </div>
        <button @click="goBuy" class="addCart">立即购买</button>
        </van-action-sheet>
      </div>
    </div>
</template>

<script>
import { getDetail, getEvaluate } from '@/api/detail'
import defaultImg from '@/assets/default-avatar.png'
import addBut from '@/components/addBut.vue'
import { addCar } from '@/api/car'
// import loginConfirm from '@/mixins/loginConfirm'

export default {
  name: 'DetailIndex',
  // mixins: [loginConfirm],
  components: {
    addBut
  },
  data () {
    return {
      show: false, // 消息弹出层
      showCar: false, // 面板弹出层
      showBuy: false, // 面板弹出层
      detail: {},
      total: 0,
      evaluate: [],
      defaultImg,
      addValue: 1 // 购物车的值
    }
  },
  computed: {
    goodsId () {
      return this.$route.params.id
    }
  },
  async created () {
    const { data } = await getDetail(this.goodsId)
    // console.log(res)
    this.detail = data.detail
    console.log(this.detail)
    const { data: { list, total } } = await getEvaluate(this.goodsId, 2)
    // console.log(list)
    this.evaluate = list
    this.total = total
  },
  methods: {
    showPopup () {
      this.show = true
    },
    show_Car () {
      this.showCar = true
    },
    show_Buy () {
      this.showBuy = true
    },
    async addCart () {
      if (!this.$store.getters.token) {
        this.$dialog.confirm({
          title: '温馨提示',
          message: '此时此刻需要您登录喔~',
          confirmButtonText: '去登录',
          cancelButtonText: '再逛会'
        })
          .then(() => {
            // 登录后回跳回现在页面
            // 使用replace 优点：防止历史记录累加
            this.$router.replace({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
            })
            // this.$router.push('/login')
          })
          .catch(() => {

          })
      }
      const res = await addCar(this.goodsId, this.addValue, this.detail.skuList[0].goods_sku_id)
      // console.log(this.goodsId)
      console.log(res)
    },
    goBuy () {
      if (!this.$store.getters.token) {
        this.$dialog.confirm({
          title: '温馨提示',
          message: '此时此刻需要您登录喔~',
          confirmButtonText: '去登录',
          cancelButtonText: '再逛会'
        })
          .then(() => {
            // 登录后回跳回现在页面
            // 使用replace 优点：防止历史记录累加
            this.$router.replace({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
            })
            // this.$router.push('/login')
          })
          .catch(() => {}
          )
        return false
      }
      this.$router.push({
        path: '/pay',
        query: {
          mode: 'buyNow',
          goodsId: this.goodsId,
          goodsNum: this.addValue,
          goodsSkuId: this.detail.skuList[0].goods_sku_id
        }
      })
    }
  }
}
</script>

<style scoped>
  .detail_content{
    padding-top: 46px;
  }
  .goods_price{
    margin-top: 10px;
    font-size: 18px;
    display: flex;
    justify-content: space-between; /*两端对齐*/
  }
  .new_price{
    font-size: 22px;
    color: red;
  }
  .goods_name{
   /* p标签设置仅显示两行 */
   font-size: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .detail_service{
    height: 30px;
    line-height: 30px;
    background-color: #fcfafa;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
  }
  .van-icon-checked{
    background-color: #fff;
  }
  .arrow{
    margin-top: 6px;
  }
  .detail_evaulate{
    font-size: 18px;
    margin-top: 5px;
    overflow: scroll;
  }
  .evaluate_title{
    height: 30px;
    line-height: 30px;
    background-color: #fcfafa;
    display: flex;
    justify-content: space-between;
  }
  .item{
    margin-top: 5px;
    padding: 5px;
  }
  ::v-deep .van-tabbar-item{
    width: 20px;
  }
  .van-tabbar button{
    font-size: 15px;
    color: #fff;
    border: none;
    border-radius: 20px;
    width: 100px;
    margin: 0 10px;
  }
  .addCart{
    font-size: 20px;
    background-color: #fb0;
    border: none;
    border-radius: 20px;
    width: 300px;
    height: 40px;
    margin: 5px 33px;
  }
</style>
